<template>
  <!-- 设置抽屉组件，用于展示和编辑应用设置 -->
  <el-drawer 
    style="background-color: var(--bg-color);"
    v-model="visible"
    title="设置"
    direction="rtl"
    :size="drawerWidth"
  >
    <div class="settings-container">
      <!-- 使用element-plus的表单组件来展示和编辑设置 -->
      <el-form :model="settings" label-width="120px">
        <!-- 深色模式切换 -->
        <!-- <el-form-item label="深色模式">
          <el-switch
            v-model="settings.isDarkMode"
            @change="handleDarkModeChange"
          />
        </el-form-item> -->
        <!-- 模型选择 -->
        <!-- <el-form-item label="模型">
          <el-select v-model="settings.model" class="w-full" @change="handleModelChange">
            <el-option
              v-for="model in modelOptions"
              :key="model.value"
              :label="model.label"
              :value="model.value"
            />
          </el-select>
        </el-form-item> -->

        <!-- 流式响应切换 -->
        <!-- <el-form-item label="流式响应">
          <el-switch
            v-model="settings.streamResponse"
          />
          <div class="form-item-tip">开启后将实时显示AI回复</div>
        </el-form-item> -->
      </el-form>

      <!-- 保存设置按钮 -->
      <div class="settings-footer">
        <el-button type="primary" @click="handleSave">保存设置</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useSettingsStore, modelOptions } from '../stores/settings'
import { ElMessage } from 'element-plus'
import { chatApi } from '../utils/api';

// 在 SettingsPanel.vue 中添加以下方法
const handleModelChange = async (newValue) => {
  // 实时更新 Store
  settingsStore.model = newValue;
  // 调用 API 更新模型（可选）
  await chatApi.updateModel(newValue);
  // ElMessage.success('模型已切换');
};



const drawerWidth = computed(() => {
  const width = window.innerWidth;
  if (width <= 480) return '70%';    // 超小屏（如 iPhone SE）
  else if (width <= 768) return '75%'; // 中小屏（如 iPhone 8）
  // else if (width <= 1024) return '80%'; // 平板
  else return '400px';               // PC 端
});

// 定义组件的props
const props = defineProps({
  modelValue: Boolean
})

// 定义组件的emits
const emit = defineEmits(['update:modelValue'])

// 使用设置存储
const settingsStore = useSettingsStore()

// 可见性计算属性，同步抽屉的可见性状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 设置对象，使用reactive进行响应式处理
const settings = reactive({
  isDarkMode: settingsStore.isDarkMode,
  streamResponse: settingsStore.streamResponse,
})

// 处理深色模式切换
const handleDarkModeChange = (value) => {
  settingsStore.toggleDarkMode()
}

// 保存设置
const handleSave = async () => {
  try {
    // 先更新本地模型状态
    settingsStore.model = settings.model;

    // 调用后端接口更新模型
    await chatApi.updateModel(settings.model);

    ElMessage.success('设置已保存');
    visible.value = false;
  } catch (error) {
    ElMessage.error('保存失败，请重试');
  }
};
</script>

<style lang="scss" scoped>
// 移动端适配
@media (max-width: 768px) {
  .settings-container {
    padding: 0.8rem !important; // 减少内边距
  }

  .settings-footer {
    padding-top: 0.5rem !important;
  }

  .el-form-item__content,
  .el-form-item__label {
    font-size: 0.9rem !important; // 缩小文字
  }

  .el-select {
    padding: 0 !important; // 移除额外填充
  }
}

// 设置页面样式
.settings-container {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 保存按钮布局
.settings-footer {
  margin-top: auto;
  padding-top: 1rem;
  text-align: right;
}

// 全宽样式，用于表单项
.w-full {
  width: 100%;
}

// 表单项提示样式
.form-item-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}
</style>